<!--
 * @Author: Yang Zhang
 * @Date: 2021-11-18 22:47:52
 * @LastEditors: Yang Zhang
 * @LastEditTime: 2021-12-30 10:56:33
 * @Description: 首页
-->
<template>
  <div class="kol-main">
    <div class="kol-main-left">
      <a-carousel class="kol-swiper" arrows autoplay>
        <template #prevArrow>
          <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
            <left-circle-outlined />
          </div>
        </template>
        <template #nextArrow>
          <div class="custom-slick-arrow" style="right: 10px">
            <right-circle-outlined />
          </div>
        </template>
        <div
          class
          v-for="item in bannersData"
          :key="item.id"
          @click.stop="gotoDetail(item.id)"
          style="cursor: pointer;"
        >
          <img :src="item.url" />
        </div>
      </a-carousel>
      <div class="kol-rec-tit">Recommended</div>
      <div class="kol-rec-list">
        <div
          class="kol-rec-list-item"
          v-for="item in recProlist"
          :key="item.brandid"
          @click.stop="gotoDetail(item)"
        >
          <div class="pro_img">
            <img :src="item.thumbnail" />
          </div>
          <div class="rec-desc overfl-oneline">{{ item.goodsName }}</div>
          <div class="rec-prize">${{ item.price }}</div>
          <div class="rec-com">Commission {{ item.commissionRate }}%</div>
          <div class="rec-addBtn" @click="addPro(item.id)">Add</div>
        </div>
      </div>
    </div>
    <div class="kol-main-right">
      <div class="kol-main-ownInfo">
        <div class="topinfo">
          <div class="kol-main-editbtn" @click.stop="editStore">Edit store cover</div>
          <div class="storepro" @click.stop="storeProfile">Store profile</div>
          <div class="kol-main-logo">
            <img :src="loginInfo.storeLogo || './avatar.png'" />
          </div>
          <div class="kol-storename">{{ loginInfo.storeName }}</div>
          <div class="linklist">
            <div class="linkitem" v-if="loginInfo.facebookUrl">
              <img src="@/assets/link/facebook.png" />
            </div>
            <div class="linkitem" v-if="loginInfo.instargramUrl">
              <img src="@/assets/link/instargram.png" />
            </div>
            <div class="linkitem" v-if="loginInfo.twitterUrl">
              <img src="@/assets/link/twitter.png" />
            </div>
            <div class="linkitem" v-if="loginInfo.youtubeUrl">
              <img src="@/assets/link/youtube.png" />
            </div>
            <div class="linkitem" v-if="loginInfo.tiktokUrl">
              <img src="@/assets/link/tiktok.png" />
            </div>
            <div class="linkitem" v-if="loginInfo.snapchatUrl">
              <img src="@/assets/link/snapchat.png" />
            </div>
          </div>
          <div class="kol-btm-btns">
            <div class="kol-btm-btn btn-primary" @click.stop="viewstore">View my store</div>
            <div class="kol-btm-btn" @click.stop="copyurl">Copy url</div>
          </div>
        </div>
        <div class="btminfo" v-if="loginInfo.storeFlag === 1">
          <div class="navlist">
            <div
              class="navitem today"
              :class="[activenav === 'TODAY' ? 'active' : '']"
              @click.stop="changeNav('TODAY')"
            >
              Today
              <div class="bdb"></div>
            </div>
            <div
              class="navitem view"
              :class="[activenav === 'ALL' ? 'active' : '']"
              @click.stop="changeNav('ALL')"
            >
              View all
              <div class="bdb"></div>
            </div>
          </div>
          <div class="datas">
            <div class="data-item">
              <div class="data-info">
                <div class="data-info-num">{{ overList.uvNum }}</div>
                <div class="data-info-desc">Store's visitors</div>
              </div>
            </div>
            <div class="data-item">
              <div class="data-info">
                <div class="data-info-num">{{ overList.paymentOrderNum }}</div>
                <div class="data-info-desc">Store's orders</div>
              </div>
            </div>
            <div class="data-item">
              <div class="data-info">
                <div class="data-info-num">{{ overList.paymentOrderSales }}</div>
                <div class="data-info-desc">Store's sales</div>
              </div>
            </div>
            <div class="data-item">
              <div class="data-info">
                <div class="data-info-num">${{ overList.paymentOrderIncome }}</div>
                <div class="data-info-desc">Store's income</div>
              </div>
            </div>
          </div>
        </div>
        <div class="btminfo" v-else>
          <div class="littleinfo">Here’s what’s happening with your store today.</div>
          <div class="strong_info">
            <div>Share and let</div>fans visit your Interestore
          </div>
        </div>
      </div>
      <div class="protitle">Product date</div>
      <div class="prolist" v-if="loginInfo.storeFlag === 1">
        <div class="product_num">
          <div class="num_item">
            <div class="num_item_num">{{ homedata.onlineGoodsNum }}</div>
            <div class="num_item_desc">Online products</div>
          </div>
          <div class="num_item">
            <div class="num_item_num">{{ homedata.oflineGoodsNum }}</div>
            <div class="num_item_desc">Offline products</div>
          </div>
        </div>
        <div class="pro-navlist">
          <div
            class="pro_navitem"
            :class="[homedataNav === 'sales' ? 'active' : '']"
            @click.stop="homedataNav = 'sales'"
          >
            Most Sales
            <div class="bd"></div>
          </div>
          <div
            class="pro_navitem"
            :class="[homedataNav === 'income' ? 'active' : '']"
            @click.stop="homedataNav = 'income'"
          >
            Most Income
            <div class="bd"></div>
          </div>
        </div>
        <div class="prolists" v-if="homedataNav === 'sales'">
          <div class="pro_item" v-for="item in homedata.mostSaleList" :key="item.id">
            <div class="img">
              <!-- <div class="triang">1</div> -->
              <img :src="item.small" />
            </div>
            <div class="right-info">
              <div class="proname">{{ item.goodsName }}</div>
              <div class="prodesc overfl-oneline">{{ item.sellingPoint }}</div>
              <div class="prosize">${{ item.price }}</div>
              <div class="rightbtminfo">Order {{ item.orderIncome }}</div>
            </div>
          </div>
        </div>
        <div class="prolists" v-if="homedataNav === 'income'">
          <div class="pro_item" v-for="item in homedata.mostIncomeList" :key="item.id">
            <div class="img">
              <!-- <div class="triang">1</div> -->
              <img :src="item.small" />
            </div>
            <div class="right-info">
              <div class="proname">{{ item.goodsName }}</div>
              <div class="prodesc overfl-oneline">{{ item.sellingPoint }}</div>
              <div class="prosize">${{ item.price }}</div>
              <div class="rightbtminfo">Order {{ item.orderIncome }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="prolist" v-else>
        <div class="infomation">
          <div>Add some</div>product to interestore
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs, onBeforeMount, onMounted, ref, Ref, onUpdated } from 'vue'
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router'
import { getSetting } from '../../api/app'
import { getIndexover, getMainBanners, getRecproducts, getHomedata } from '../../api/home'
import { IBanneritem, IHomedata, ILogininfo, IOverview } from '../types';
import { useStore } from 'vuex';
import { addProduct, storeProlist } from '../../api/product';
import { message } from 'ant-design-vue';
import clipBoard from 'vue-clipboard3'
let Clip = clipBoard
let { toClipboard } = Clip()
const store = useStore()
interface DataProps { }

const router = useRouter()

const gotoDetail = (item: any) => {
  console.log(item)
  router.push(`/product/detail?id=${item.id}`)
}

const copyurl = async () => {
  try {
    await toClipboard('https://cool.intere.store/#/merchant?id=' + loginInfo.value.id)
    message.success('copy successful')
  } catch (error) {
    message.error(error)
  }
}
const viewstore = () => {
  location.href = ('https://cool.intere.store/#/merchant?id=' + loginInfo.value.id)
}

// 两个按钮跳转
const editStore = () => {
  router.push('/kol/index/editStore')
}
const storeProfile = () => {
  router.push('/kol/index/storeProfile')
}

// 各种需要的数据

const bannersData = ref<IBanneritem[]>([])    // banners数据
const recProlist = ref<any[]>([])             // 推荐商品列表
const loginInfo = ref({} as ILogininfo)           // 登录信息 

onMounted(() => {
  getLoginInfo()
  // 各种数据初始化
  getBanners()
  getRecPros()
})



// 获取登录信息
const getLoginInfo = async () => {
  const res = await getSetting()
  console.log('获取了')
  if (res) {
    loginInfo.value = { ...res.result }
    store.dispatch('user/updateUserinfo', res.result)
  }
}
// 初始化轮播图数据
const getBanners = async () => {
  const res = await getMainBanners()
  if (res) {
    bannersData.value = res.result
  }
}
// 获取推荐商品信息
const getRecPros = async () => {
  const res = await getRecproducts()
  if (res) {
    recProlist.value = res.result
  }
}


const activenav = ref('TODAY')

// 获取订单概览统计数据
const overList = ref({} as IOverview)
const getOverview = async (type: string) => {
  let param = {
    searchType: type,
  }
  const res = await getIndexover(param)
  if (res) {
    overList.value = res.result
  }
}

const changeNav = (type: string) => {
  activenav.value = type
  getOverview(type)
}

onMounted(() => {
  getOverview('TODAY')
})


// 添加商品
const addPro = async (id: any) => {
  const res = await addProduct({ goodsId: id })
  if (res) {
    if (res.code !== 200) {
      message.error(res.message)
    } else {
      message.success(res.message)
      router.push('/product')
    }
  }
}


// KOl首页数据信息相关
const homedata = ref({} as IHomedata)
const homedataNav = ref('sales')
const getHomedatas = async () => {
  const res = await getHomedata()
  if (res) {
    homedata.value = res.result
  }
}
onMounted(() => {
  getHomedatas()
})
</script>
<style lang='scss' scoped>
.kol-main {
  width: 1596px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  .kol-main-left {
    width: 788px;
    background: #fff;
    padding: 26px 21px;
    .kol-swiper {
      img {
        width: 746px;
        height: 247px;
      }
    }
    .kol-rec-tit {
      font-size: 24px;
      font-family: Galvji;
      font-weight: bold;
      color: #000000;
      margin-top: 40px;
      margin-bottom: 30px;
    }

    .kol-rec-list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .kol-rec-list-item {
        width: 239px;
        background: #ffffff;
        margin-bottom: 15px;
        padding: 16px;
        margin-right: 14px;
        cursor: pointer;
        .pro_img {
          width: 207px;
          height: 207px;
          background-color: red;
          margin-bottom: 10px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .rec-desc {
          max-height: 40px;
          font-size: 14px;
          font-family: Galvji;
          font-weight: 400;
          color: #000000;
          margin-bottom: 10px;
        }
        .rec-prize {
          font-size: 16px;
          font-family: Galvji;
          font-weight: bold;
          color: #000000;
          margin-bottom: 10px;
        }
        .rec-com {
          font-size: 16px;
          font-family: Galvji;
          font-weight: bold;
          color: #e60044;
          margin-bottom: 15px;
        }
        .rec-addBtn {
          width: 207px;
          height: 42px;
          border: 1px solid #e0e0e0;
          font-size: 15px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #000000;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }
        .rec-addBtn:hover {
          background-color: #000;
          color: #fff;
        }
      }
      .kol-rec-list-item:hover {
        box-shadow: 0px 0px 13px 0px rgba(219, 219, 231, 0.72);
      }
      .kol-rec-list-item:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
  .kol-main-right {
    width: 784px;
    .kol-main-ownInfo {
      width: 784px;
      height: 806px;
      padding: 0 37px;
      display: flex;
      flex-direction: column;
      background-color: #fff;
      .topinfo {
        width: 100%;
        flex: 1;
        border-bottom: 1px dashed #e0e0e0;
        padding: 42px 7px;
        position: relative;
        .kol-main-editbtn {
          width: 158px;
          height: 40px;
          border: 1px solid #e0e0e0;
          border-radius: 16px;
          font-size: 14px;
          font-family: Galvji;
          font-weight: 400;
          color: #000000;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          margin-bottom: 21px;
        }
        .storepro {
          height: 16px;
          font-size: 14px;
          font-family: Galvji;
          font-weight: 400;
          text-decoration: underline;
          color: #757575;
          position: absolute;
          top: 49px;
          right: 15px;
          cursor: pointer;
        }
        .kol-main-logo {
          width: 150px;
          height: 150px;
          border-radius: 50%;
          margin: 0 auto;
          margin-bottom: 31px;
          img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
          }
        }
        .kol-storename {
          font-size: 18px;
          font-family: Galvji;
          font-weight: bold;
          color: #000000;
          text-align: center;
          margin-bottom: 18px;
        }
        .linklist {
          width: 290px;
          height: 34px;
          margin: 0 auto;
          display: flex;
          margin-bottom: 48px;
          .linkitem {
            width: 34px;
            height: 34px;
            cursor: pointer;
            margin-right: 10px;
            img {
              width: 34px;
              height: 34px;
            }
          }
        }
        .kol-btm-btns {
          width: 395px;
          height: 40px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          .kol-btm-btn {
            width: 160px;
            height: 40px;
            border: 1px solid #e60044;
            border-radius: 20px;
            color: #e60044;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 14px;
          }
          .btn-primary {
            background-color: #e60044;
            color: #fff;
          }
        }
      }
      .btminfo {
        width: 100%;
        height: 100px;
        flex: 1;
        padding-top: 37px;
        padding-bottom: 30px;
        display: flex;
        flex-direction: column;
        .strong_info {
          font-size: 36px;
          font-family: Galvji;
          font-weight: bold;
          color: #000000;
          margin-top: 50px;
        }
        .littleinfo {
          font-size: 18px;
          font-family: Galvji;
          font-weight: normal;
          color: #000000;
        }
        .navlist {
          display: flex;
          justify-content: center;
          .navitem {
            font-size: 20px;
            font-family: Galvji;
            font-weight: bold;
            color: #000000;
            margin-bottom: 12px;
            cursor: pointer;
          }
          .today {
            margin-right: 41px;
          }
          .view {
            margin-left: 41px;
          }
          .active {
            margin-bottom: 12px;
            color: #e60044;
            .bdb {
              width: 40px;
              height: 6px;
              background-color: #e60044;
              margin: 0 auto;
              margin-top: 12px;
            }
          }
        }
        .datas {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          .data-item {
            width: 50%;
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            .data-info {
              height: 52px;
              font-size: 30px;
              font-family: Galvji;
              font-weight: bold;
              color: #000000;
              text-align: center;
              .data-info-desc {
                font-size: 16px;
                font-weight: normal;
              }
            }
          }
        }
      }
    }

    .protitle {
      font-size: 24px;
      font-family: Galvji;
      font-weight: bold;
      color: #000000;
      margin-top: 40px;
      margin-bottom: 30px;
    }
    .prolist {
      width: 100%;
      min-height: 1511px;
      background: #fff;
      border-top: 4px solid #e60044;
      .infomation {
        font-size: 36px;
        font-family: Galvji;
        font-weight: bold;
        color: #000000;
        margin-top: 90px;
        margin-left: 98px;
      }
      .product_num {
        width: 100%;
        height: 140px;
        padding: 22px 0;
        display: flex;
        .num_item {
          width: 50%;
          height: 100%;
          border-right: 1px dashed #e0e0e0;
          text-align: center;
          padding: 15px 0;
          .num_item_num {
            font-size: 30px;
            font-family: Galvji;
            font-weight: bold;
            color: #000000;
          }
          .num_item_desc {
            font-size: 16px;
            font-family: Galvji;
            font-weight: normal;
            color: #000000;
          }
        }
      }
      .pro-navlist {
        width: 100%;
        height: 62px;
        line-height: 62px;
        display: flex;
        padding-left: 32px;
        .pro_navitem {
          font-size: 20px;
          font-family: Galvji;
          font-weight: bold;
          color: #000000;
          margin-right: 85px;
          cursor: pointer;
        }
        .pro_navitem.active {
          color: #e60044;
          position: relative;
          .bd {
            width: 40px;
            height: 6px;
            background-color: #e60044;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
      .prolists {
        width: 100%;
        min-height: 1000px;
        padding: 33px 23px;
        .pro_item {
          width: 100%;
          height: 143px;
          border: 1px solid #e0e0e0;
          padding: 15px 16px;
          display: flex;
          margin-bottom: 15px;
          .img {
            width: 113px;
            height: 113px;
            margin-right: 20px;
            img {
              width: 113px;
              height: 113px;
            }
          }
          .right-info {
            flex: 1;
            height: 113px;
            position: relative;
            .proname {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: bold;
              color: #000000;
            }
            .prodesc {
              width: 555px;
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: normal;
              color: #000000;
            }
            .prosize {
              position: absolute;
              left: 0;
              bottom: 0;
              font-size: 24px;
              font-family: PingFang SC;
              font-weight: bold;
              color: #000000;
              height: 1em;
              line-height: 1em;
            }
            .rightbtminfo {
              font-size: 16px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #e60044;
              position: absolute;
              bottom: 0;
              right: 0;
            }
          }
        }
      }
    }
  }
}
</style>
